<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
     class App extends React.Component{
        render(){
            return (
                <div>
                    <h1>插槽的基本使用</h1>   
                    {
                        /* 
                        所谓的插槽就是组件标签内所携带的内容
                        */
                    }
                    <Child>
                     <h3>学习使我快乐</h3>   
                    </Child>
                    {
                        /* 当插槽的内容为多个时 children属性为一个数组 */
                    }
                    <Two>
                     <h1>哈哈哈哈</h1>
                     <h2>嘿嘿黑</h2>
                     <h3>啦啦啦啦</h3>    
                    </Two>
                </div>
            )
        }
     }

    class Child extends React.Component{
        render(){
            console.log(this)
            return <div>
                {this.props.children}
                    <h2>我是子组件</h2>
                </div>
        }
    }
    class Two extends React.Component{
        render(){
            console.log(this)
            return(
                <div>
                    {
                        /* 
                            this.props.children获取插槽的内容 当前插槽内容为多个时则children属性为数组
                        */
                    }
                    {this.props.children[0]}
                    <h2>我是two组件</h2>0
                    {this.props.children[1]}
                    {this.props.children[2]}
                </div>
            )
        }
    }
    
     ReactDOM.render(<App/>,document.getElementById("root"))
</script>
</html>